<template>
  <div class="container">
    <div class="button-row">
      <a-button
        class="top-left my-button"
        type="primary"
        shape="round"
        @click="openAppActivationModal"
      >
        用户签约系统<br />
        User Subscription System
        <UserOutlined style="font-size: 90px" />
      </a-button>
      <AppActivationModal ref="appActivationModal" />
      <a-button
        class="top-right my-button"
        type="primary"
        shape="round"
        @click="openCoreNetworkActivation"
      >
        区块链浏览器
        <br />
        Blockchain browser
        <CloudServerOutlined style="font-size: 90px" />
      </a-button>
      <CoreNetworkActivation ref="coreNetworkActivation" />
    </div>
    <div class="button-row">
      <a-button
        class="bottom-left my-button"
        type="primary"
        shape="round"
        @click="openBaseStationActivation"
      >
        监控系统<br />
        Monitoring system
        <DeploymentUnitOutlined style="font-size: 90px" />
      </a-button>
      <BaseStationActivation ref="baseStationActivation" />
      <a-button
        class="bottom-right my-button"
        type="primary"
        shape="round"
        @click="openUERegistrationModal"
      >
        待补充<br />
        <AntDesignOutlined style="font-size: 90px" />
      </a-button>
      <UERegistrationModal ref="uERegistrationModal" />
    </div>
  </div>
</template>
<script setup>
  import {
    UserOutlined,
    CloudServerOutlined,
    DeploymentUnitOutlined,
    AntDesignOutlined,
  } from '@ant-design/icons-vue'
  import AppActivationModal from './components/UserSignModal.vue'
  import CoreNetworkActivation from './components/CoreNetworkActivation.vue'
  import BaseStationActivation from './components/BaseStationActivation.vue'
  import UERegistrationModal from './components/UERegistrationModal.vue'
  import { ref } from 'vue'

  // 获取子组件的相应实例
  const appActivationModal = ref(null)
  const coreNetworkActivation = ref(null)
  const baseStationActivation = ref(null)
  const uERegistrationModal = ref(null)
  // 打开用户签约前台启动模态框
  const openAppActivationModal = () => {
    appActivationModal.value.showModal()
  }
  //打开核心网启动模态框
  const openCoreNetworkActivation = () => {
    coreNetworkActivation.value.showModal()
  }

  const openBaseStationActivation = () => {
    baseStationActivation.value.showModal()
  }

  const openUERegistrationModal = () => {
    uERegistrationModal.value.showModal()
  }
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .my-button {
    background-image: linear-gradient(
      to right,
      rgb(60, 158, 245) 0%,
      rgba(0, 224, 254, 0.827) 100%
    );
    opacity: 1;
    margin: 20px;
    width: 650px; /* 设置按钮的宽度 */
    height: 400px; /* 设置按钮的高度 */
    font-size: 170%;
    text-align: left;
  }

  .my-button .anticon {
    margin-left: 20px; /* 调整图标与文本之间的间距 */
  }

  .button-row {
    display: flex;
    justify-content: center;
  }

  .icon {
    margin-left: 20px; /* 调整图标与文本之间的间距 */
  }
</style>
